<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-10 14:29:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-10 16:18:25
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        body {
            background: #ccc;
            text-align: center;
            font: 12px/20px Arial;
        }

        #box {
            position: relative;
            width: 492px;
            height: 172px;
            background: #fff;
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 10px auto;
        }

        #box .list {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        #box .list li {
            position: absolute;
            top: 0;
            left: 0;
            width: 490px;
            height: 170px;
            opacity: 0;
            transition: opacity 0.5s linear
        }

        #box .list li.current {
            opacity: 1;
        }

        #box .count {
            position: absolute;
            right: 0;
            bottom: 5px;
        }

        #box .count li {
            color: #fff;
            float: left;
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 5px;
            overflow: hidden;
            background: #F90;
            opacity: 0.7;
            border-radius: 20px;
        }

        #box .count li.current {
            color: #fff;
            opacity: 0.7;
            font-weight: 700;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li class="current" style="opacity: 1;"><img src="imgs/p1.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p2.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p3.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p4.jpg" width="490" height="170"></li>
            <li style="opacity: 0;"><img src="imgs/p5.jpg" width="490" height="170"></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li class="">2</li>
            <li class="">3</li>
            <li class="">4</li>
            <li class="">5</li>
        </ul>
    </div>
    <script>
        // 获取元素  
        var divEle = document.getElementById('box');
        var ulsEle = divEle.getElementsByTagName('ul');
        var imgs = ulsEle[0].getElementsByTagName('li');
        var btn =  ulsEle[1].getElementsByTagName('li');
        var play = null; //记录第几个定时器
        var index = 0; // 第几图显示
        // 同一时刻只能一张图片显示 另外的图片隐藏  一个按钮高亮 其它按钮默认
        // 为了保证 开始以前先让所有的图片隐藏  所有的按钮默认 
        // 轮到谁 哪张图片显示 对应的按钮高亮 

        // 切换图片 之前让所有的图片隐藏 按钮默认样式
        // 轮到谁谁显示 

        //因为用户会手动选择自己想看的图片 
        // 所以 我们能用循环挨个让图片显示 
        // 可以通过传参让指定的图片显示  指定的按钮高亮
        function show(num){
            for(var i=0;i<imgs.length;i++){
                imgs[i].style.opacity = 0;
                btn[i].className = "";
            }

            imgs[num].style.opacity = 1;
            btn[num].className = "current";
        } 
        // 上面是切换一张图片
        //想让图片轮着切换 需要定时器 
        function autoplay(){
            
            play = setInterval(function(){
                
                if(index >= imgs.length){
                    index = 0; // 总共5张图片  01234 4以后应该是 0 
                    // 防止越界 
                } // 先判断  是否越界
                show(index); // 没有越界就显示
                index++; // 下一张图片
            },1000);
        }
        autoplay(); // 打开网页自动轮播 

        //鼠标移入 停止轮播 
        divEle.onmouseover = function(){
            clearInterval(play);
        }
        // 鼠标移出开始轮播
        divEle.onmouseout = function(){
            autoplay()
        }

        //给每个按钮绑定鼠标移入事件 
        // 用户点击哪个按钮 就显示对应的图片 

        for(var i=0;i<btn.length;i++){
            btn[i].dataset.index = i;  
            btn[i].onmouseover = function(){
                // 移入谁 显示第几张 
                show(this.dataset.index);
                index = this.dataset.index
                // 轮播停止  
                clearInterval(play)
            }
        }

    </script>

    
</body>

</html>